import React, { useEffect, useState } from 'react'
import { NavBar, DotLoading } from 'antd-mobile'
import { SearchOutline } from 'antd-mobile-icons'
import { useHistory, connect } from 'umi';
// import "./index.less";


function Cinames(props: any) {

  const history = useHistory();
  useEffect(() => {
    //如果影院状态的list 是空就开始请求数据  否则走缓存
    console.log("cinames props", props)
    if (props.list.length === 0) {
      props.dispatch({
        type: "cinames/getList",
        payload: {
          cityId: props.cityId
        }
      })
    } else {
      console.log("走缓存")
    }
    return () => { }
  }, [])

  return (
    <div style={{ width: "100%" }}>
      <NavBar
        onBack={() => {
          console.log("点击的返回按钮");
          //请空list 缓存
          props.dispatch({
            type: "cinames/removeList"
          });
          history.push("/city");
        }}
        back={
          props.cityName
        }
        backArrow={false}
        right={<SearchOutline onClick={() => {
          history.push("cinames/search")
        }} />}
      >院线</NavBar>

      {
        props.loading &&
        <div style={{ fontSize: 18, textAlign: "center" }}>
          <DotLoading />
        </div>
      }
      {props.list.map(itme => <li key={itme.cinemaId}>{itme.name}</li>)}

    </div>
  )
}
export default connect((state: any) => {
  console.log("cinames的connect", state)
  const city = state.city;
  return {
    cityName: state.city.cityName,
    cityId: state.city.cityId,
    list: state.cinames.list,
    loading: state.loading.global,
  };
})(Cinames);
